<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MES制造执行系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <h1><i class="fas fa-industry"></i> MES制造执行系统</h1>
            <div class="user-info">
                <span id="currentTime"></span>
                <i class="fas fa-user-circle"></i>
            </div>
        </header>

        <!-- Navigation -->
        <nav class="sidebar">
            <ul class="nav-menu">
                <li class="nav-item active" data-page="dashboard">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>仪表盘</span>
                </li>
                <li class="nav-item" data-page="products">
                    <i class="fas fa-box"></i>
                    <span>产品管理</span>
                </li>
                <li class="nav-item" data-page="workorders">
                    <i class="fas fa-clipboard-list"></i>
                    <span>工单管理</span>
                </li>
                <li class="nav-item" data-page="production">
                    <i class="fas fa-cogs"></i>
                    <span>生产记录</span>
                </li>
            </ul>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Dashboard Page -->
            <div id="dashboard" class="page active">
                <h2>系统概览</h2>
                <div class="dashboard-grid">
                    <div class="stats-card">
                        <div class="stats-icon products">
                            <i class="fas fa-box"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="totalProducts">-</h3>
                            <p>产品总数</p>
                        </div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-icon workorders">
                            <i class="fas fa-clipboard-list"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="totalWorkOrders">-</h3>
                            <p>工单总数</p>
                        </div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-icon production">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="totalProductionRecords">-</h3>
                            <p>生产记录</p>
                        </div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-icon progress">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stats-info">
                            <h3 id="inProgressOrders">-</h3>
                            <p>进行中工单</p>
                        </div>
                    </div>
                </div>
                
                <div class="recent-activities">
                    <h3>最近活动</h3>
                    <div class="activity-list" id="recentActivities">
                        <p class="loading">加载中...</p>
                    </div>
                </div>
            </div>

            <!-- Products Page -->
            <div id="products" class="page">
                <div class="page-header">
                    <h2>产品管理</h2>
                    <button class="btn btn-primary" id="addProductBtn">
                        <i class="fas fa-plus"></i> 添加产品
                    </button>
                </div>
                
                <div class="search-bar">
                    <input type="text" id="productSearch" placeholder="搜索产品名称...">
                    <select id="categoryFilter">
                        <option value="">所有分类</option>
                        <option value="电子产品">电子产品</option>
                        <option value="电脑配件">电脑配件</option>
                    </select>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>产品代码</th>
                                <th>产品名称</th>
                                <th>分类</th>
                                <th>价格</th>
                                <th>库存</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="productsTableBody">
                            <tr>
                                <td colspan="7" class="loading">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Work Orders Page -->
            <div id="workorders" class="page">
                <div class="page-header">
                    <h2>工单管理</h2>
                    <button class="btn btn-primary" id="addWorkOrderBtn">
                        <i class="fas fa-plus"></i> 创建工单
                    </button>
                </div>
                
                <div class="search-bar">
                    <select id="statusFilter">
                        <option value="">所有状态</option>
                        <option value="PENDING">待处理</option>
                        <option value="IN_PROGRESS">进行中</option>
                        <option value="COMPLETED">已完成</option>
                        <option value="CANCELLED">已取消</option>
                    </select>
                    <select id="productionLineFilter">
                        <option value="">所有产品线</option>
                        <option value="生产线A">生产线A</option>
                        <option value="生产线B">生产线B</option>
                        <option value="生产线C">生产线C</option>
                    </select>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>工单编码</th>
                                <th>产品</th>
                                <th>计划数量</th>
                                <th>完成数量</th>
                                <th>不合格数量</th>
                                <th>状态</th>
                                <th>产品线</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="workOrdersTableBody">
                            <tr>
                                <td colspan="8" class="loading">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Production Records Page -->
            <div id="production" class="page">
                <div class="page-header">
                    <h2>生产记录</h2>
                    <div class="btn-group">
                        <button class="btn btn-success" id="addProductionBtn">
                            <i class="fas fa-plus"></i> 添加生产记录
                        </button>
                        <button class="btn btn-warning" id="addRejectionBtn">
                            <i class="fas fa-exclamation-triangle"></i> 添加不合格记录
                        </button>
                    </div>
                </div>
                
                <div class="search-bar">
                    <select id="recordTypeFilter">
                        <option value="">所有类型</option>
                        <option value="PRODUCTION">生产</option>
                        <option value="REJECTION">不合格</option>
                        <option value="REWORK">返工</option>
                    </select>
                    <select id="workstationFilter">
                        <option value="">所有工作站</option>
                        <option value="工作站A1">工作站A1</option>
                        <option value="工作站B1">工作站B1</option>
                        <option value="工作站C1">工作站C1</option>
                    </select>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>工单编码</th>
                                <th>数量</th>
                                <th>记录类型</th>
                                <th>工作站</th>
                                <th>操作员</th>
                                <th>班次</th>
                                <th>质量状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="productionRecordsTableBody">
                            <tr>
                                <td colspan="9" class="loading">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- Modal -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modalBody"></div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast"></div>

    <script src="js/app.js"></script>
</body>
</html>